<template>
  <view class="container">
	<xk-header :headerbg="true" class="header" :back="true" title="停车记录列表"></xk-header>
	<block v-for="(item, index) in carStopList" :key="index">
	<view class="carbox" @click="gotoUrl" :data-url="'/pagesB/parking/detail?id='+item.id">
	<u-row customStyle="margin-bottom: 10px">
		<u-col span="3">
			<view class="box1"><image class="caricon" mode="widthFix" :src="item.in_url" ></image></view>
		</u-col>
		<u-col span="9">
			<view class="title1">{{item.car_no}}</view>
			<view class="title2">{{item.park_name}}</view>
			<view class="title3">{{timeFormat(item.in_time)}} ~ {{timeFormat(item.out_time)}}</view>
		</u-col>
	</u-row>
	</view>
    </block>
	<!-- <view class="loadtext"><u-loading-icon mode="circle" :vertical="true" size="20" textSize="12" text="加载更多信息"></u-loading-icon></view> -->
  </view>
</template>

<script>
  /* import { setCartTabBadge } from '@/core/app'
  import * as Api from '@/api/page'
  import Page from '@/components/page' */

  const App = getApp()

  export default {
    components: {},
    data() {
      return {
        // 页面参数
        options: {},
        // 页面属性
        page: {},
        // 页面元素
        items: [],
		pageSize:8,
		pageNo:0,
		carStopList:[],
		List:[
			{id:1,carname:'粤A 88666',quyu:'停车场B区 1003',start_time:'2022-11-01 12 :11',end_time:'2022-12-02 14:10'},
			{id:2,carname:'粤A 88666',quyu:'停车场B区 1003',start_time:'2022-11-01 12 :11',end_time:'2022-12-02 14:10'},
			{id:3,carname:'粤A 88666',quyu:'停车场B区 1003',start_time:'2022-11-01 12 :11',end_time:'2022-12-02 14:10'},
			{id:4,carname:'粤A 88666',quyu:'停车场B区 1003',start_time:'2022-11-01 12 :11',end_time:'2022-12-02 14:10'},
			{id:5,carname:'粤A 88666',quyu:'停车场B区 1003',start_time:'2022-11-01 12 :11',end_time:'2022-12-02 14:10'},
			{id:6,carname:'粤A 88666',quyu:'停车场B区 1003',start_time:'2022-11-01 12 :11',end_time:'2022-12-02 14:10'},
			{id:7,carname:'粤A 88666',quyu:'停车场B区 1003',start_time:'2022-11-01 12 :11',end_time:'2022-12-02 14:10'},
			{id:8,carname:'粤A 88666',quyu:'停车场B区 1003',start_time:'2022-11-01 12 :11',end_time:'2022-12-02 14:10'},
		]
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      // 当前页面参数
      this.options = options
      // 加载页面数据
	  this.getList(true)
      //this.getPageData();
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
      // 更新购物车角标
      //setCartTabBadge()
    },

    methods: {
		timeFormat(timeData){
			const time = new Date(timeData)
			const year = time.getFullYear()
			const month = time.getMonth()
			const day = time.getDate()
			var h = time.getHours();
			var mm = time.getMinutes();
			var s = time.getSeconds();
			const formattTime = `${year}-${month}-${day} ${h}:${mm}`
			return formattTime
		},
		//下拉刷新
		onPullDownRefresh() {
		      this.pageNo = 0; // 重置 pageNum
		      this.getList()
		      uni.stopPullDownRefresh()
		    },
			
		//触底加载
		/**
		   * 触底加载更多
		   */
		  onReachBottom() {
		    this.getList(true) // 加载更多数据
		  },
		
		getList(isLoadMore = false){
			let that = this
			uni.showLoading({
			        title: '加载中...'
			      })
			uni.request({
				url:`${this.$api.ibmsBaseUrl}/ob/parking/getPassList?pageSize=${this.pageSize}&pageNo=${this.pageNo}`,
				// url:`http://192.168.1.114:8098/msg/cockpit/queryAlarm?limit=${this.pageNum}`,
				method: 'GET',
				header: {
					 'Content-Type': 'application/json' // 请求头设置为json格式
				   },
				   success: function(res) {
					   if(isLoadMore) {
							console.log('停车场',res)
							that.carStopList.push(...res?.data?.data?.list)
							console.log(that.carStopList)
					   }
					   uni.hideLoading()
					   that.pageNo += 1 // pageNum 加 1
				   },
				   fail: function(err) {
					 console.log(err); // 请求失败的回调函数，输出错误信息
				   }
			})
		},
			
		gotoUrl(e){
		var weburl=e.currentTarget.dataset.url;
		//在起始页面跳转到test.vue页面并传递参数
		uni.navigateTo({
			url:weburl
		});
	  },
      /**
       * 加载页面数据
       * @param {Object} callback
       */
      getPageData(callback) {
        const app = this
        const pageId = app.options.pageId || 0
        Api.detail(pageId)
          .then(result => {
            // 设置页面数据
            const { data: { pageData } } = result
            app.page = pageData.page
            app.items = pageData.items
            // 设置顶部导航栏栏
            app.setPageBar();
          })
          .finally(() => callback && callback())
      },

      /**
       * 设置顶部导航栏
       */
      setPageBar() {
        const {
          page
        } = this
        // 设置页面标题
        uni.setNavigationBarTitle({
          title: page.params.title
        });
        // 设置navbar标题、颜色
        uni.setNavigationBarColor({
          frontColor: page.style.titleTextColor === 'white' ? '#ffffff' : '#000000',
          backgroundColor: page.style.titleBackgroundColor
        })
      },

    },

    /**
     * 下拉刷新
     */
  //   onPullDownRefresh() {
  //     // 获取首页数据
  //     this.getPageData(() => {
		// console.log(111111222)
  //       uni.stopPullDownRefresh()
  //     })
  //   },

    /**
     * 分享当前页面
     */
    onShareAppMessage() {
      const app = this
      const { page } = app
      return {
        title: page.params.share_title,
        path: "/pages/index/index?" + app.$getShareUrlParams()
      }
    },

    /**
     * 分享到朋友圈
     * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
     * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
     */
    onShareTimeline() {
      const app = this
      const { page } = app
      return {
        title: page.params.share_title,
        path: "/pages/index/index?" + app.$getShareUrlParams()
      }
    }

  }
</script>

<style lang="scss" scoped>
   page{
		background:#F5F5F5!important;
	}
  .container {
    background: #F5F5F5;
  }
  .carbox{
	  background-color:#FFFFFF;
	  border-bottom:1px solid #F1F1F1;
	  font-size:28rpx;
	  padding:30rpx 10rpx 20rpx 10rpx;
  }
  .box1{
	  text-align:center;
  }
  .caricon{
	 background:#FFFFFF;
	 text-align:center;
	 width:120rpx;
	 height:120rpx;
	 margin:0px auto;
  }
  .title1{
	  font-size:32rpx;
  }
  .title2{
  	  font-size:26rpx;
	  color:#999;
	  padding:10rpx 0rpx 10rpx 0rpx;
  }
  .title3{
  	  font-size:26rpx;
	  color:#999;
  }
  .loadtext{
  	  text-align:center;
  	  padding:30rpx 0 50rpx 0;
  	  font-size:24rpx;
  	  color: #999;
  }
</style>
